<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <script src="../../lib/jquery/jquery-3.6.0.js"></script>
  <script src="../../javaScript/index.js"></script>
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../javaScript/shangpinguanli/shangpinliebiao.js">
  <link rel="stylesheet" href="../../font/iconfont.css">
  <link rel="stylesheet" href="../../css/public.css">
  <link rel="stylesheet" href="../../css/shangpinguanli/xinzenshanggpin1.css">


</head>
<style>

</style>

<body>
  <div class="container">

    <div class="input-group">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="输入关键词搜索分类">
    </div>
    <div class="content">

      <ul class="clear one">

      </ul>

      <ul class="clear two">

      </ul>

      <ul class="clear three">


      </ul>
    </div>
    <div class="p">
      <p>请按照商品对应的类别谨慎选择商品分类</p>
    </div>
    <div>
      <a href="./xinzengshangpin2.html"><button class="mbutton-blue">下一步</button></a>
    </div>
  </div>
  <script>
    let arrFen = [
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
    ]

    function btnF() {

      $('.content').css({ 'display': 'block' })
    }
    function fenlei(data) {
      $.each(data, (index, item) => {
        $('.one').append(`
<li class="yi"><span>${item.btn1}<span class="iconfont icon-youjiantou"></span>
  </span></li>
`)
        $('.two').append(`
<li class="er"><span>${item.btn2}<span class="iconfont icon-youjiantou"></span>
  </span></li>
`)
        $('.three').append(`
<li class="san"><span>${item.btn3}
  </span></li>
`)
      })
    }
    fenlei(arrFen)
    $('.one').on('click', '.yi', function () {
      $('.two').find('li:last-child').css('visibility', 'hidden')
      $('.two').css({ "display": 'block', "left": '190px' })
      for (let i = 0; i < $('.yi').length; i++) {
        $('.yi').eq(i).css({ "background-color": "#FFFFFF", })
        $('.yi').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })
      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
    })
    $('.two').on('click', '.er', function () {


      for (let i = 0; i < $('.er').length; i++) {
        $('.er').eq(i).css({ "background-color": "#FFFFFF", })
        $('.er').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
      $('.three').css({ "display": 'block', "left": '380px' })
    })
    $(".three").on('click', '.san', function () {

      for (let i = 0; i < $('.san').length; i++) {
        $('.san').eq(i).css({ "background-color": "#FFFFFF", })
        $('.san').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })



    })


  </script>
</body>

</html>